import React from 'react'
import { Button,message, Checkbox, Form, Input } from 'antd';
import {useNavigate} from 'react-router-dom';
import { LoginApi } from '../apis/user';
import '../style/Login.css'
export default function Login() {
  // 跳转
  const navigate = useNavigate();
  // 转圈
  const [Loading,setLoading]=React.useState(false)
  // 提交表单成功
  const onFinish = (values) => {
    console.log('Success:', values);
    setLoading(true)
    // fetch("http://jacklv.cn/users/login",{
    //   method:'post',
    //   body:JSON.stringify(values),
    //   headers: {
    //     "Content-Type": "application/json"
    //   }
    // })
    LoginApi(values)
    .then(res => {//后端返回的数据
      setLoading(false)
      console.log('res1', res)
        //登录成功
        // console.log(123);
        const {token,userInfo,permissions} = res;
        message.success("登录成功");
        //把重要信息存储到本地存储
        localStorage.token = token;
        localStorage.userInfo = JSON.stringify(userInfo);
        localStorage.permissions = JSON.stringify(permissions);
        //跳转到导航页
        navigate("/nav")
    })
    .catch(err=>{
      setLoading(false)
    })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
<div style={{ backgroundColor: '#001529',height:'100vh',width:'100vw' }}>
    <Form
    className='Login'
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      width: 600,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label={<div style={{color:'white'}}>用户名</div>}
      name="account"
      rules={[
        {
          required: true,
          message: '请输入用户名!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label={<div style={{color:'white'}}>密码</div>}
      name="password"
      rules={[
        {
          required: true,
          message: '请输入密码!',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item
      name="remember"
      valuePropName="checked"
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Checkbox style={{color:'white'}}>记住我</Checkbox>
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button loading={Loading} type="primary" htmlType="submit">
        提交
      </Button>
    </Form.Item>
   </Form>
</div>
  )
}

